<script setup>

const props = defineProps({
  t1:String,
  t2:String,
  t3:String,
  t4:String,
  t5:String,
})
let truncatedString = props.t1.substring(0, 20);
const imgUrl = "http://localhost:8080/"+props.t5;
console.log(imgUrl)
</script>

<template>
    <div class="body1" :style="{backgroundImage:'url('+imgUrl+')'}" >
      <div class="text">
        <div class="t1">
          {{truncatedString}}...
        </div>
        <div class="t2">
          &nbsp&nbsp¥&nbsp{{t4}}&nbsp起
        </div>
      </div>
    </div>
</template>

<style >
.img{
  height: 100%;
  width: 100%;
}
.text{
  width: 269px;
  height: 118px;
 background-color:rgba(0,0,0,0.5) ;
  margin-top: 252px;
}
.t1{
  width: 200px;
  margin: auto;
  font-size: 18px;
  font-weight: 450;
  color: white;
}
.t1:hover{
  color: #FF1268;
}
.t2{
  margin-top: 10px;
  font-size: 18px;
  color: white;
}
.t2:hover{
  color: #FF1268;
}
.body1{
  width: 269px;
  height: 370px;
  background: blue;
  background-repeat:no-repeat ;
  background-size:cover ;
}
</style>